<template>
  <div>
    <van-nav-bar :title="title" :left-arrow="false" />

    <div style="display: flex">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell-group>
          <van-cell
            icon="fire-o"
            v-for="item in questions"
            :key="item.id"
            :title="item.name"
            :label="item.desc"
            is-link
            center
            :to="'/question/' + item.id"
          />
        </van-cell-group>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getQuestions } from "@/api/polls";
export default {
  name: "QuestionList",
  components: {},
  data() {
    return {
      title: this.$route.meta.title,
      active: 0,
      questions: [],

      loading: false,
      finished: false,
      count: 0,

      listQuery: {
        page: 1,
        page_size: 20,
      },
    };
  },

  created() {
    this.questions = [];
  },

  methods: {
    onLoad() {
      this.getQuestionList();
    },

    getQuestionList() {
      getQuestions(this.listQuery)
        .then((res) => {
          if (res.data.results.length === 0) {
            this.questions = []; // 清空数组
            this.finished = true; // 停止加载
          }

          this.count = res.data.count;
          this.listQuery.page = res.data.page;
          this.questions.push(...res.data.results);
          this.loading = false;

          if (this.questions.length >= res.data.count) {
            this.finished = true; // 结束加载状态
          }
        })
        .catch((error) => {
          this.$notify({ type: "danger", message: "读取数据失败" + error });
          if (error.response) {
            // this.$notify({ type: "danger", message: "读取数据失败" + error });
          }
        });
    },

    questionDetail(question_id) {
      this.$router.push(`/question/${question_id}`);
    },
  },
};
</script>

<style  scoped>
</style>